﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <!-- Title-->
    <title>称重管理系统</title>
    <!-- Favicon-->
    <link rel="icon" href="img/core-img/favicon.ico">
    <!-- Core Stylesheet-->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Preloader-->
    <div class="preloader" id="preloader">
      <div class="spinner-grow text-secondary" role="status">
        <div class="sr-only">Loading...</div>
      </div>
    </div>
    <!-- Header Area-->
    <div class="header-area" id="headerArea">
      <div class="container h-100 d-flex align-items-center justify-content-between">
        <!-- Back Button-->
        <div class="back-button"><a href="shop-grid.html"><i class="icofont-rounded-left"></i>Back</a></div>
        <!-- Page Title-->
        <div class="page-heading">
          <h6 class="mb-0">Product Details</h6>
        </div>
        <!-- Navbar Toggler-->
        <div class="suha-navbar-toggler d-flex justify-content-between flex-wrap" id="suhaNavbarToggler"><span></span><span></span><span></span></div>
      </div>
    </div>
    <!-- Sidenav Black Overlay-->
    <div class="sidenav-black-overlay"></div>
    <!-- Side Nav Wrapper-->
    <div class="suha-sidenav-wrapper" id="sidenavWrapper">
      <!-- Sidenav Profile-->
      <div class="sidenav-profile">
        <div class="user-profile"><img src="img/bg-img/9.jpg" alt=""></div>
        <div class="user-info">
          <h6 class="user-name mb-0">Suha Jannat</h6>
          <p class="available-balance">Balance <span>$<span class="counter">478.61</span></span></p>
        </div>
      </div>
      <!-- Sidenav Nav-->
      <ul class="sidenav-nav">
        <li><a href="profile.html"><i class="icofont-star"></i>My Profile</a></li>
        <li><a href="notifications.html"><i class="icofont-exclamation-tringle"></i>Notifications<span class="ml-3 badge badge-warning">3</span></a></li>
        <li><a href="pages.html"><i class="icofont-page"></i>All Pages</a></li>
        <li><a href="wishlist-grid.html"><i class="icofont-heart"></i>My Wishlist</a></li>
        <li><a href="settings.html"><i class="icofont-gear-alt"></i>Settings</a></li>
        <li><a href="intro.html"><i class="icofont-power"></i>Sign Out</a></li>
      </ul>
      <!-- Go Back Button-->
      <div class="go-home-btn" id="goHomeBtn"><i class="icofont-rounded-left"></i></div>
    </div>
    <div class="page-content-wrapper">
      <!-- Product Slides-->
      <div class="product-slides owl-carousel">
        <!-- Single Hero Slide-->
        <div class="single-product-slide"><img src="img/bg-img/6.jpg" alt=""></div>
        <!-- Single Hero Slide-->
        <div class="single-product-slide"><img src="img/bg-img/10.jpg" alt=""></div>
        <!-- Single Hero Slide-->
        <div class="single-product-slide"><img src="img/bg-img/11.jpg" alt=""></div>
      </div>
      <div class="product-description pb-3">
        <!-- Product Title & Meta Data-->
        <div class="product-title-meta-data bg-white mb-3 py-3">
          <div class="container d-flex justify-content-between">
            <div class="p-title-price">
              <h6 class="mb-1">Floral Circle Neck Dress</h6>
              <p class="sale-price mb-0">$38<span>$41</span></p>
            </div>
            <div class="p-wishlist-share"><a href="wishlist-grid.html"><i class="icofont-heart"></i></a><a href="#"><i class="icofont-share"></i></a></div>
          </div>
          <!-- Ratings-->
          <div class="product-ratings">
            <div class="container d-flex align-items-center justify-content-between">
              <div class="ratings"><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i></div>
              <div class="total-result-of-ratings"><span>4.96</span><span>Very Good</span></div>
            </div>
          </div>
        </div>
        <!-- Selection Panel-->
        <div class="selection-panel bg-white mb-3 py-3">
          <div class="container d-flex align-items-center justify-content-between">
            <!-- Choose Color-->
            <div class="choose-color-wrapper">
              <p class="mb-0">Color</p>
              <div class="choose-color-radio d-flex align-items-center">
                <div class="custom-control custom-radio mr-1">
                  <input class="custom-control-input" type="radio" id="customRadio1" name="customRadio" checked>
                  <label class="custom-control-label primary" for="customRadio1"></label>
                </div>
                <div class="custom-control custom-radio mr-1">
                  <input class="custom-control-input" type="radio" id="customRadio2" name="customRadio">
                  <label class="custom-control-label yellow" for="customRadio2"></label>
                </div>
                <div class="custom-control custom-radio mr-1">
                  <input class="custom-control-input" type="radio" id="customRadio3" name="customRadio">
                  <label class="custom-control-label purple" for="customRadio3"></label>
                </div>
                <div class="custom-control custom-radio mr-1">
                  <input class="custom-control-input" type="radio" id="customRadio4" name="customRadio">
                  <label class="custom-control-label green" for="customRadio4"></label>
                </div>
              </div>
            </div>
            <!-- Choose Size-->
            <div class="choose-size-wrapper text-right">
              <p class="mb-0">Size</p>
              <ul class="mb-0 choose-size-radio d-flex align-items-center">
                <li><a href="#">S</a></li>
                <li class="active"><a href="#">M</a></li>
                <li><a href="#">L</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Add To Cart-->
        <div class="cart-form-wrapper bg-white mb-3 py-3">
          <div class="container">
            <form class="cart-form" action="#" method="post">
              <input class="form-control" type="text" id="qty2" step="1" min="1" max="12" name="quantity" value="1"><a class="btn btn-danger mr-2" href="checkout.html">Buy Now</a>
              <button class="btn btn-warning" type="submit">Add to cart</button>
            </form>
          </div>
        </div>
        <!-- Product Specification-->
        <div class="p-specification bg-white mb-3 py-3">
          <div class="container">
            <h6>Specifications</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum? Id, culpa? At officia quisquam laudantium nisi mollitia nesciunt, qui porro asperiores cum voluptates placeat similique recusandae in facere quos vitae?</p>
            <ul>
              <li>100% good reviews</li>
              <li>7 days returns</li>
              <li>Warranty not aplicable</li>
            </ul>
          </div>
        </div>
        <!-- Rating & Review Wrapper-->
        <div class="rating-and-review-wrapper bg-white py-3 mb-3">
          <div class="container">
            <h6>Ratings &amp; Reviews</h6>
            <div class="rating-review-content">
              <ul>
                <li class="single-user-review d-flex">
                  <div class="user-thumbnail"><img src="img/bg-img/7.jpg" alt=""></div>
                  <div class="rating-comment">
                    <div class="rating"><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i></div>
                    <p class="comment mb-0">Very good product. It's just amazing!</p><span class="name-date">Designing World 12 Dec 2020</span>
                  </div>
                </li>
                <li class="single-user-review d-flex">
                  <div class="user-thumbnail"><img src="img/bg-img/8.jpg" alt=""></div>
                  <div class="rating-comment">
                    <div class="rating"><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i></div>
                    <p class="comment mb-0">WOW excellent product. Love it.</p><span class="name-date">Designing World 8 Dec 2020</span>
                  </div>
                </li>
                <li class="single-user-review d-flex">
                  <div class="user-thumbnail"><img src="img/bg-img/9.jpg" alt=""></div>
                  <div class="rating-comment">
                    <div class="rating"><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i></div>
                    <p class="comment mb-0">What a nice product it is. I am looking it's.</p><span class="name-date">Designing World 28 Nov 2020</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Ratings Submit Form-->
        <div class="ratings-submit-form bg-white py-3">
          <div class="container">
            <h6>Submit A Review</h6>
            <form action="#" method="POST">
              <div class="form-group">
                <div class="stars">
                  <input class="star-1" type="radio" name="star" id="star1">
                  <label class="star-1" for="star1"></label>
                  <input class="star-2" type="radio" name="star" id="star2">
                  <label class="star-2" for="star2"></label>
                  <input class="star-3" type="radio" name="star" id="star3">
                  <label class="star-3" for="star3"></label>
                  <input class="star-4" type="radio" name="star" id="star4">
                  <label class="star-4" for="star4"></label>
                  <input class="star-5" type="radio" name="star" id="star5">
                  <label class="star-5" for="star5"></label><span></span>
                </div>
              </div>
              <div class="form-group">
                <textarea class="form-control" id="comments" name="comment" cols="30" rows="10" data-max-length="200"></textarea>
              </div>
              <button class="btn btn-sm btn-primary" type="submit">Save Review</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- Footer Nav-->
    <div class="footer-nav-area" id="footerNav">
      <div class="suha-footer-nav h-100">
        <ul class="h-100 d-flex align-items-center justify-content-between">
            <li><a href="index.html"><img src="img/core-img/home.svg" alt="">首页</a></li>
            <li><a href="message.html"><img src="img/core-img/chat.svg" alt="">消息</a></li>
            <li><a href="cart.html"><img src="img/core-img/shopping-cart.svg" alt="">购物车</a></li>
            <li><a href="pages.html"><img src="img/core-img/heart.svg" alt="">页面</a></li>
            <li><a href="settings.html"><img src="img/core-img/settings.svg" alt="">设置</a></li>
        </ul>
      </div>
    </div>
    <!-- All JavaScript Files-->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.animatedheadline.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/jarallax.min.js"></script>
    <script src="js/jarallax-video.min.js"></script>
    <script src="js/default/jquery.passwordstrength.js"></script>
    <script src="js/default/active.js"></script>
  </body>
</html>